<template>
  <div class="top-container">
    <div class="top-container-title">
      <h1 v-if="!isGameStarted">飞行棋</h1>
      <VanButton v-else round @click="restart" :disabled="isMoving || diceRolling">重新开始</VanButton>
    </div>
    <div class="right-container">
      <VanButton 
        round
        :icon="iconSetting"
        type="primary"
        :disabled="isMoving || diceRolling"
        @click="actionSheetVisible = true">
      </VanButton>
    </div>
    <VanActionSheet v-model:show="actionSheetVisible" :actions="actions" @select="onSelect" />
    <VanDialog v-model:show="playSettingVisible" title="设置游戏人数" show-cancel-button @confirm="confirmPlayerCount">
      <p class="tips">注意：设置游戏人数后会重新开始游戏</p>
      <VanRadioGroup v-model="playerCount">
        <van-cell-group inset>
          <van-cell title="单人游戏" clickable @click="playerCount = 1">
            <template #right-icon>
              <van-radio :name="1" />
            </template>
          </van-cell>
          <van-cell title="双人游戏" clickable @click="playerCount = 2">
            <template #right-icon>
              <van-radio :name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </VanRadioGroup>
    </VanDialog>
    <VanDialog v-model:show="diceSettingVisible" title="设置骰子概率" show-cancel-button @confirm="confirmDiceSetting">
      <p class="tips">值越大，小点数概率越高</p>
      <van-cell-group inset :style="{ paddingBottom: '20px' }">
        <VanStepper v-model="diceStep" :max="10" :min="1" />
      </van-cell-group>
    </VanDialog>
  </div>
</template>

<script setup lang="ts">
import iconSetting from '@/assets/images/icon_setting.svg'

const { isGameStarted, isMoving, diceRolling, dataStore, initGame } = useFlight()

function restart() {
  showConfirmDialog({
    title: '重新开始',
    message: '确定要重新开始游戏吗？',
  }).then(() => {
    initGame()
  }).catch(() => {})
}

const actionSheetVisible = ref(false)
const playSettingVisible = ref(false)
const diceSettingVisible = ref(false)
const playerCount = ref(dataStore.value.playerCount)
const diceStep = ref(dataStore.value.step)
console.log(playerCount.value)

onMounted(() => {
  playerCount.value = dataStore.value.playerCount
  console.log(playerCount.value)
})

const actions = [
  { name: '设置游戏人数', type: 'settingPlayer', color: '#07c160' },
  { name: '设置骰子概率', type: 'settingDice', color: '#07c160' },
]

function confirmDiceSetting(args: any) {
  dataStore.value.step = diceStep.value
  diceSettingVisible.value = true;
}

function onSelect(action: typeof actions[number]) {
  if (action.type === 'settingPlayer') {
    playSettingVisible.value = true
  }
  if (action.type === 'settingDice') {
    diceSettingVisible.value = true;
  }
  actionSheetVisible.value = false
}

function confirmPlayerCount() {
  dataStore.value.playerCount = playerCount.value
  playSettingVisible.value = false
  initGame()
}
</script>

<style lang="scss" scoped>
.top-container {
  position: relative;
  display: flex;
  height: 45px;
  width: 100%;
  justify-content: center;
}

.right-container {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.tips {
  padding: 20px;
}
</style>
